<template>
	<!-- 购物车的每一项 -->
	<view class="carItem">
		<view class="left">
			<view class="pic">
				<image class="img" :src="item.picurls" mode="aspectFill"></image>
			</view>
			<view class="text">
				<view class="title">
					{{item.name}}
				</view>
				<view class="sku">
				</view>
				<view class="price">
					<view class="big">
						￥{{item.price}}
					</view>
					<view class="small">
						￥{{item.preprice}}
					</view>
				</view>
			</view>
		</view>
		<view class="right">
			<!-- 传的值里面有goodsid -->
			<!-- 这传给步进器的是我们在vuex中定义好的carList,这里面没有id,有goodsid -->
			<numbox :item="item"></numbox>
		</view>
	</view>
</template>

<script>
	export default {
		name: "carItem",
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.carItem {
		padding: 5rpx 0;
		border-bottom: 1rpx solid $border-color;
		position: relative;

		.left {
			width: 500rpx;
			@include flex-box();

			.pic {
				width: 200rpx;
				height: 200rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				flex: 1;
				padding: 0 0 0 20rpx;

				.title {
					@include ellipsis(2);
					font-weight: bold;
					font-size: 40rpx;
					padding: 10rpx 0;
				}

				.sku {
					padding: 5rpx 0;
					font-size: 24rpx;
					color: #999;
				}

				.price {
					@include flex-box-set(start, end);


					.big {
						font-weight: bold;
						font-size: 28rpx;
						color: $price-color;
					}

					.small {
						padding: 0 0 0 10rpx;
						text-decoration: line-through;
						font-size: 20rpx;
						color: #888;
					}
				}
			}
		}

		.right {
			position: absolute;
			right: 20rpx;
			bottom: 35rpx;
		}
	}
</style>
